<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <script src="//unpkg.com/vue@next"></script>
    <script src="//unpkg.com/vue-router@4"></script>
    <script src="//unpkg.com/element-plus"></script>
    <title>Index</title>
    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100%">
        <el-header>
            <el-row justify="space-between">
                <el-col :span="3">
                    <el-image src="https://element-plus.gitee.io/images/element-plus-logo.svg"></el-image>
                </el-col>
                <el-col :span="16">2</el-col>
                <el-col :span="1">
                    <el-avatar src="https://www.baidu.com/img/flexible/logo/pc/result.png"></el-avatar>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu router>
                    <el-sub-menu index="1">
                        <template #title>Navigator One</template>
                        <el-menu-item index="/">Go to Home</el-menu-item>
                        <el-menu-item index="/dashboard">Go to Dashboard</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>Navigator Two</template>
                        <el-menu-item index="2-1">Option 1</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
    <template id="home">
        <div>Home{{tokenValue}}</div>
    </template>
    <template id="dashboard">
        <div>Dashboard</div>
    </template>
</div>
<script>
    if (!localStorage.getItem("tokenHead") || !localStorage.getItem("tokenValue")) {
        top.location = "/";
        // self.location = "/";
        // window.history.back(-1);
        // window.location.href = "/";
    }
    const app = Vue.createApp({
        data() {
            return {
                tokenHead: localStorage.getItem("tokenHead"),
                tokenValue: localStorage.getItem("tokenValue")
            }
        },
        methods: {
            goToDashboard() {
                if (this.tokenHead) {
                    this.$router.push('/dashboard');
                } else {
                    this.$router.push('/login');
                }
            }
        }
    });
    app.use(VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes: [
            {path: '/', component: {template: document.getElementById("home")}},
            {path: '/dashboard', component: {template: document.getElementById("dashboard")}}
        ]
    }))
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>